<template>
  <view class="submit-dialog-container">
    <view class="dialog-container">
      <view class="title">{{ title }}</view>
      <view class="body">
        <slot></slot>
      </view>
      <view class="answer2-container" v-if="question">
        <view class="flex f1" v-if="question.type ===3">
          <view>正确答案：
            <image src="@/static/lan_gou.png" mode="aspectFit" v-if="question.answerStr === 'A'"
                   style="height: 20rpx;width: 30rpx"></image>
            <image src="@/static/lan_cha.png" mode="aspectFit" v-else-if="question.answerStr === 'B'"
                   style="height: 20rpx;width: 30rpx"></image>
          </view>
          <view style="margin-left: 40rpx">你的答案答案：
            <image src="@/static/lan_gou.png" mode="aspectFit" v-if="selected === 'A'"
                   style="height: 20rpx;width: 30rpx"></image>
            <image src="@/static/lan_cha.png" mode="aspectFit" v-else-if="selected === 'B'"
                   style="height: 20rpx;width: 30rpx"></image>
          </view>
        </view>
        <view class="flex f1" v-else>
          <view>正确答案：{{ question.answerStr }}</view>
          <view style="margin-left: 40rpx">你的答案答案：{{ selected }}</view>
        </view>
        <view class="flex h hc">
          <view class="dialog-btn primary" @click="close">确定</view>
        </view>
      </view>
      <view class="footer">
        <slot name="footer"></slot>
        <view v-if="showDownTime" class="tips">页面将在 {{ time }} 秒后自动返回</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: ['title', 'showDownTime', 'question', 'selected'],
  name: "SubmitDialog",
  data() {
    return {time: 10}
  },
  created() {
    if (this.showDownTime) {
      this._timeDown = setInterval(() => {
        if (this.time === 0) {
          console.log('结束考试')
          this.$emit(this.showDownTime)
          clearInterval(this._timeDown)
          return
        }

        this.time--
      }, 1000)
    }
  },
  destroyed() {
    console.log('destroyed')
    clearInterval(this._timeDown)
  },
  methods: {
    close() {
      clearInterval(this._timeDown)
      this._timeDown = null
      this.$emit('close')
    }
  }
}
</script>
<style scoped lang="scss">
.submit-dialog-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000a;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;

  .dialog-container {
    background-color: #0E57CD;
    width: 878rpx;
    padding-bottom: 40rpx;
    display: flex;
    flex-direction: column;

    .title {
      height: 82rpx;
      font-size: 16px;
      color: #FFFFFF;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .body {
      height: 200rpx;
      display: flex;
      flex-direction: column;
      padding: 20rpx 30rpx;
      background-color: #fff;
      margin-left: 10rpx;
      margin-right: 10rpx;
      border-radius: 5rpx;
      overflow: hidden;
    }

    .answer2-container {
      background-color: #fff;
      margin-left: 10rpx;
      margin-right: 10rpx;
      border-radius: 5rpx;
      margin-top: 20rpx;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      padding: 20rpx 30rpx;
      font-size: 15px;
      color: #343630;
    }

    .dialog-btn {
      width: 160rpx;
      height: 68rpx;
      background-color: #fff;
      border-radius: 5rpx;
      font-size: 15px;
      color: #000000;
      margin-left: 60rpx;
      margin-top: 36rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      &.primary {
        border: 1px solid #aaa;
      }

      &:first-child {
        margin-left: 0;
      }
    }

    .footer {
      .tips {
        text-align: center;
        color: #fff;
        font-size: 12px;
        margin-top: 20rpx;
      }
    }
  }
}
</style>